<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title">
                    <span>按批次查询成本</span>
                </h3>
            </div>
            <div class="col-xs-6 text-right">
                <!-- <button (click)="exportToExcel()" class="btn btn-outline-success"><i class="fa fa-file-excel-o"></i>
                    {{l("ExportToExcel")}}</button> -->
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="row">
            <div class="col-lg-3">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group m-form__group align-items-center">
                                    <h5>选择批次查询任务</h5>
                                    <div class="input-group">
                                        <select class="form-control form-control-sm" name="piciCombobox" id="piciCombobox" [(ngModel)]="selectPiciId">
                                            <option value=""></option>
                                            <option *ngFor="let pici of picis" [value]="pici.value">
                                                {{ pici.displayText }}
                                            </option>
                                        </select>
                                        <span class="input-group-btn">
                                            <button (click)="startQuery()" class="btn btn-primary btn-sm" type="button">
                                                <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row align-items-center" style="margin: 0;">
                            <div class="col-12" style="padding: 0; margin-bottom: 10px;">
                                <input [(ngModel)]="filterText" name="filterText" class="form-control form-control-sm m-input" [placeholder]="l('SearchWithThreeDot')"
                                    type="text" (keydown.Enter)="searchTasks()">
                            </div>
                            <div class="primeng-datatable-container">
                                <p-table #dataTable (onLazyLoad)="getTasks($event)" [value]="primengTableHelper.records" rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                    [paginator]="false" [lazy]="true" selectionMode="single" [(selection)]="selectedTask" (onRowSelect)="onTaskSelect($event)"
                                    dataKey="id" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns">
                                    <ng-template pTemplate="body" let-record="$implicit">
                                        <tr [pSelectableRow]="record">
                                            <td style="width: 100%">{{ record.taskNum }} ({{ record.productId }}&nbsp;&nbsp;{{ record.productName }})</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                    {{ l("NoData") }}
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator rows="{{ primengTableHelper.defaultRecordsCountPerPage }}" #paginator (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{ l("TotalRecordsCount", primengTableHelper.totalRecordsCount) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <h5 *ngIf="costs?.length">批次
                            <b>单数量</b>成本</h5>
                        <div class="m-widget27 m-portlet-fit--sides" style="margin: -2.2rem; margin-top: 0; margin-bottom: 0;">
                            <div class="m-widget27__container" style="margin-top: 0; padding-top: 0">
                                <!-- begin::Nav pills -->
                                <ul class="m-widget27__nav-items nav nav-pills nav-fill" role="tablist">
                                    <li *ngFor="let simpleCost of costs" class="m-widget27__nav-item nav-item">
                                        <a class="nav-link active" data-toggle="pill">
                                            {{ simpleCost.category }}
                                            <br />
                                            <b>￥{{ simpleCost.amount | number: "1.2-2" }}</b>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div *ngIf="selectedTask?.id">
                            <hr />
                            <h5>
                                任务
                                <b>{{ selectedTask?.taskNum }}</b>
                                的成本
                            </h5>
                            <div class="m-widget27 m-portlet-fit--sides" style="margin: -2.2rem; margin-top: 0;">
                                <div class="m-widget27__container" style="margin-top: 0; padding-top: 0">
                                    <!-- begin::Nav pills -->
                                    <ul class="m-widget27__nav-items nav nav-pills nav-fill" role="tablist">
                                        <li *ngFor="let simpleCost of taskCosts" class="m-widget27__nav-item nav-item">
                                            <a class="nav-link active" data-toggle="pill">
                                                {{ simpleCost.category }}
                                                <br />
                                                <b>￥{{ simpleCost.amount | number: "1.2-2" }}</b>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center" style="padding-top: 15px;">
                            <div class="primeng-datatable-container" [busyIf]="detailTableIsLoading">
                                <p-table #detailDataTable (onLazyLoad)="getCostDetail($event)" [value]="detailCosts" rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                    [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 220px">
                                                条码
                                            </th>
                                            <th style="width: 60px">
                                                车间
                                            </th>
                                            <th style="width: 50px">
                                                年
                                            </th>
                                            <th style="width: 50px">
                                                月
                                            </th>
                                            <th style="width: 150px">
                                                成本类型
                                            </th>
                                            <th style="width: 150px">
                                                成本名称
                                            </th>
                                            <th style="width: 100px">
                                                成本金额
                                            </th>
                                            <!-- <th style="width: 100px">
                                                比例
                                            </th> -->
                                            <th style="width: 100px">
                                                单价
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit">
                                        <tr>
                                            <th style="width: 220px">
                                                {{ record.batchId + "@" + record.quantity }}
                                            </th>
                                            <td style="width: 60px">
                                                {{ record.workshop }}
                                            </td>
                                            <td style="width: 50px">
                                                {{ record.time.year }}
                                            </td>
                                            <td style="width: 50px">
                                                {{ record.time.month }}
                                            </td>
                                            <td style="width: 150px">
                                                {{ record.category }}
                                            </td>
                                            <td style="width: 150px">
                                                {{ record.title }}
                                            </td>
                                            <td style="width: 100px">
                                                {{ record.amount }}
                                            </td>
                                            <!-- <th style="width: 100px">
                                                {{ record.ratio | number: "1.2-2" }}
                                            </th> -->
                                            <th style="width: 100px">
                                                {{ record.unitCost | number: "1.2-2" }}
                                            </th>
                                        </tr>
                                    </ng-template>
                                </p-table>

                                <div class="primeng-no-data" *ngIf="detailCostsCount == 0">
                                    {{ l("NoData") }}
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator rows="{{ primengTableHelper.defaultRecordsCountPerPage }}" #detailPaginator (onPageChange)="getCostDetail($event)"
                                        [totalRecords]="detailCostsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{ l("TotalRecordsCount", detailCostsCount) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
